<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>keep-alive</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .reg {
            width: 100px;
            height: 100px;
            background-color: #eea236;
        }
    </style>
</head>
<body>
<div id="case13-demo5">
   <button type="button" v-on:click="change()">点击动态改变组件</button>
    <br>
    <keep-alive>
        <component v-bind:is="case13Demo5App"></component>
    </keep-alive>
    <templete id="case13-demo6">
        <div class="comment-area">
            <div class="reg"></div>
            <my-div-son></my-div-son>
        </div>
    </templete>

</div>

<script type="text/javascript">
    var case13Demo5=new Vue({//根组件
        el:"#case13-demo5",
        data:{
            case13Demo5App:"app-div"
        },
        methods:{
            change:function () {
                if (case13Demo5.case13Demo5App=="app-div"){
                    case13Demo5.case13Demo5App="app-p";
                }else {
                    case13Demo5.case13Demo5App="app-div"
                }
            }
        },
        components:{
            'app-div':{
                template:'#case13-demo6',
                components: {
                    'my-div-son':{
                        data:function () {
                            return{}
                        }
                    },
                    template:"<h3>qqqq</h3>"
                }
            },
            'app-p':{
                data:function () {
                    return {
                        msg: Math.random()
                    }
                },
                template: '<p class="reg">这是一个p,{{msg}}</p>'
            }
        }
    })
</script>
</body>
</html>